<template>
    <div class='container' :style="{ paddingTop: headerHeight + 'px', paddingBottom: bottomHeight + 'px' }">
        <!-- 页面头部 -->
        <page-header :title="pageTitle" :leftButton="{
            icon: 'home-filled',
            size: 36,
        }" :customEvent="true" @leftClick="handleLeftClick" @heightChange="handleHeaderHeightChange" />

        <!-- 全局排行榜模板 -->
        <template v-if="isGlobalRank">
            <!-- 搜索筛选区 -->
            <view class="search-filter-box">
                <!-- 搜索框 -->
                <view class="search-box">
                    <uni-icons type="search" size="20" color="#999"></uni-icons>
                    <input class="search-input" v-model="searchKeyword" placeholder="搜索作品名称或作者"
                        @input="handleSearchInput" />
                    <view class="search-btn" @click="handleSearchClick">
                        <text>搜索</text>
                    </view>
                </view>

                <!-- 筛选选项 -->
                <view class="filter-options">
                    <view class="filter-item" @click="handleSortClick('votes')">
                        <text>票数</text>
                        <uni-icons :type="getSortIcon('votes')" size="16" :color="getSortColor('votes')"></uni-icons>
                    </view>
                    <view class="filter-item" @click="handleSortClick('hot')">
                        <text>热度</text>
                        <uni-icons :type="getSortIcon('hot')" size="16" :color="getSortColor('hot')"></uni-icons>
                    </view>
                    <view class="filter-item" @click="handleSortClick('time')">
                        <text>时间</text>
                        <uni-icons :type="getSortIcon('time')" size="16" :color="getSortColor('time')"></uni-icons>
                    </view>
                    <view class="filter-item" @click="handleSortClick('likes')">
                        <text>点赞</text>
                        <uni-icons :type="getSortIcon('likes')" size="16" :color="getSortColor('likes')"></uni-icons>
                    </view>
                </view>
            </view>

            <!-- 全局排行榜列表 -->
            <view class="rank-list">
                <view class="rank-item" v-for="(item, index) in filteredRankList" :key="item.id"
                    @click="handleRankItemClick(item)">
                    <!-- 排名 -->
                    <view class="rank-number" :class="getRankClass(index + 1)">
                        <text>{{ index + 1 }}</text>
                    </view>

                    <!-- 作品信息 -->
                    <view class="entry-info">
                        <view class="entry-header">
                            <text class="entry-title">{{ item.title }}</text>
                            <view class="entry-status" :class="item.status">
                                <text>{{ item.statusText }}</text>
                            </view>
                        </view>

                        <!-- 作者信息 -->
                        <view class="author-info">
                            <view class="author-avatar">
                                <image :src="item.authorAvatar" mode="aspectFill"></image>
                            </view>
                            <view class="author-details">
                                <text class="author-name">{{ item.authorName }}</text>
                                <text class="publish-time">{{ item.publishTime }}</text>
                            </view>
                        </view>

                        <!-- 作品描述 -->
                        <text class="entry-desc">{{ item.description }}</text>

                        <!-- 所属活动 -->
                        <view class="activity-info">
                            <uni-icons type="flag" size="14" color="#666"></uni-icons>
                            <text class="activity-name">{{ item.activityName }}</text>
                        </view>

                        <!-- 统计数据 -->
                        <view class="entry-stats">
                            <view class="stat-item">
                                <uni-icons type="checkbox" size="14" color="#666"></uni-icons>
                                <text>{{ item.votes }}票</text>
                            </view>
                            <view class="stat-item">
                                <uni-icons type="fire" size="14" color="#ff6b35"></uni-icons>
                                <text>{{ item.hotScore }}热度</text>
                            </view>
                            <view class="stat-item">
                                <uni-icons type="heart" size="14" color="#ff4757"></uni-icons>
                                <text>{{ item.likes }}点赞</text>
                            </view>
                            <view class="stat-item">
                                <uni-icons type="eye" size="14" color="#666"></uni-icons>
                                <text>{{ item.views }}浏览</text>
                            </view>
                        </view>

                        <!-- 作品预览图 -->
                        <view class="entry-preview" v-if="item.previewImages && item.previewImages.length > 0">
                            <image v-for="(img, imgIndex) in item.previewImages.slice(0, 3)" :key="imgIndex" :src="img"
                                mode="aspectFill" class="preview-image"></image>
                            <view class="more-images" v-if="item.previewImages.length > 3">
                                <text>+{{ item.previewImages.length - 3 }}</text>
                            </view>
                        </view>
                    </view>

                    <!-- 操作按钮 -->
                    <view class="action-buttons">
                        <view class="vote-btn" @click.stop="handleVoteClick(item)">
                            <uni-icons type="checkbox" size="16" color="#007AFF"></uni-icons>
                            <text>投票</text>
                        </view>
                        <view class="like-btn" @click.stop="handleLikeClick(item)">
                            <uni-icons :type="item.isLiked ? 'heart-filled' : 'heart'" size="16"
                                :color="item.isLiked ? '#ff4757' : '#999'"></uni-icons>
                        </view>
                        <view class="detail-btn" @click.stop="handleDetailClick(item)">
                            <uni-icons type="right" size="16" color="#999"></uni-icons>
                        </view>
                    </view>
                </view>
            </view>
        </template>

        <!-- 活动内部排行榜模板 -->
        <template v-else>
            <!-- 活动内部排行榜列表 -->
            <view class="activity-rank-list">
                <view class="activity-rank-item" v-for="(item, index) in filteredRankList" :key="item.id"
                    @click="handleRankItemClick(item)">
                    <!-- 排名 -->
                    <view class="rank-number" :class="getRankClass(index + 1)">
                        <text>{{ index + 1 }}</text>
                    </view>

                    <!-- 作品信息 -->
                    <view class="entry-info">
                        <view class="entry-header">
                            <text class="entry-title">{{ item.title }}</text>
                        </view>

                        <!-- 作者信息 -->
                        <view class="author-info">
                            <view class="author-avatar">
                                <image :src="item.authorAvatar" mode="aspectFill"></image>
                            </view>
                            <view class="author-details">
                                <text class="author-name">{{ item.authorName }}</text>
                            </view>
                        </view>

                        <!-- 差距信息 -->
                        <view class="gap-info" v-if="index > 0">
                            <text class="gap-text">距上一名差 {{ getVoteGap(item, filteredRankList[index - 1]) }} 票</text>
                        </view>
                    </view>

                    <!-- 操作按钮 -->
                    <view class="action-buttons">
                        <view class="vote-btn" @click.stop="handleVoteClick(item)">
                            <uni-icons type="checkbox" size="16" color="#007AFF"></uni-icons>
                            <text>投票</text>
                        </view>
                        <view class="detail-btn" @click.stop="handleDetailClick(item)">
                            <uni-icons type="right" size="16" color="#999"></uni-icons>
                        </view>
                    </view>
                </view>
            </view>
        </template>

        <!-- 加载更多 -->
        <view class="load-more" v-if="hasMore" @click="handleLoadMore">
            <text v-if="!loading">加载更多</text>
            <text v-else>加载中...</text>
        </view>

        <!-- 无数据提示 -->
        <view class="empty-box" v-if="filteredRankList.length === 0 && !loading">
            <uni-icons type="info" size="60" color="#ccc"></uni-icons>
            <text>暂无作品排行榜数据</text>
        </view>

        <!-- 底部导航栏 -->
        <page-bottom pageUrl="/pages-vote/rank/EntryRank" @navClick="handleTabClick"
            @heightChange="handleBottomHeightChange" />
    </div>
</template>

<script>
// 结构
import {
    defineComponent,
    onMounted,
    ref,
    watch,
    reactive,
    computed,
} from 'vue';
import { onLoad } from '@dcloudio/uni-app';
// 模块化
import PageHeader from '@/components/PageHeader.vue';
import PageBottom from '@/components/PageBottom.vue';

export default defineComponent({
    name: 'EntryRank', // 组件名称
    props: {
        // 接收父组件数据

    },
    components: {
        PageHeader,
        PageBottom
    },
    // 主要是组件内交互事件
    setup(props, ctx) {
        // 这里没有this,直接使用props里数据
        // 进行数据的定义和初始化。object style interactive
        onMounted(() => { });

        // ===== 响应式对象 =====
        // 头部和底部高度
        const headerHeight = ref(88);
        const bottomHeight = ref(100);

        // 页面参数
        const activityId = ref(1); // 模拟有活动ID的情况
        const activityName = ref('2024年度设计大赛'); // 模拟活动名称

        // 搜索关键词
        const searchKeyword = ref('');

        // 排序配置
        const sortConfig = ref({
            field: 'votes', // 当前排序字段
            order: 'desc' // 排序方向：desc降序，asc升序
        });

        // 排行榜数据
        const rankList = ref([
            {
                id: 1,
                title: '创新设计作品',
                description: '这是一个充满创意的设计作品，展现了作者独特的视角和精湛的技艺',
                authorName: '张三',
                authorAvatar: '/static/images/avatar1.jpg',
                publishTime: '2024-03-15',
                activityName: '2024年度设计大赛',
                votes: 1256,
                hotScore: 95,
                likes: 89,
                views: 2345,
                status: 'active',
                statusText: '进行中',
                previewImages: [
                    '/static/images/work1.jpg',
                    '/static/images/work2.jpg',
                    '/static/images/work3.jpg',
                    '/static/images/work4.jpg'
                ],
                isLiked: false
            },
            {
                id: 2,
                title: '环保主题摄影',
                description: '以环保为主题的摄影作品，呼吁大家关注环境保护',
                authorName: '李四',
                authorAvatar: '/static/images/avatar2.jpg',
                publishTime: '2024-03-14',
                activityName: '2024年度设计大赛',
                votes: 892,
                hotScore: 88,
                likes: 67,
                views: 1890,
                status: 'active',
                statusText: '进行中',
                previewImages: [
                    '/static/images/work5.jpg',
                    '/static/images/work6.jpg'
                ],
                isLiked: true
            },
            {
                id: 3,
                title: '数字艺术作品',
                description: '运用现代数字技术创作的艺术作品，展现了科技与艺术的完美结合',
                authorName: '王五',
                authorAvatar: '/static/images/avatar3.jpg',
                publishTime: '2024-03-13',
                activityName: '2024年度设计大赛',
                votes: 1456,
                hotScore: 92,
                likes: 123,
                views: 3120,
                status: 'active',
                statusText: '进行中',
                previewImages: [
                    '/static/images/work7.jpg',
                    '/static/images/work8.jpg',
                    '/static/images/work9.jpg'
                ],
                isLiked: false
            },
            {
                id: 4,
                title: '传统工艺作品',
                description: '传承传统工艺，展现中华文化的深厚底蕴',
                authorName: '赵六',
                authorAvatar: '/static/images/avatar4.jpg',
                publishTime: '2024-03-12',
                activityName: '2024年度设计大赛',
                votes: 678,
                hotScore: 76,
                likes: 45,
                views: 1567,
                status: 'active',
                statusText: '进行中',
                previewImages: [
                    '/static/images/work10.jpg'
                ],
                isLiked: false
            },
            {
                id: 5,
                title: '现代装置艺术',
                description: '现代装置艺术作品，探索空间与材料的关系',
                authorName: '钱七',
                authorAvatar: '/static/images/avatar5.jpg',
                publishTime: '2024-03-11',
                activityName: '2024年度设计大赛',
                votes: 445,
                hotScore: 68,
                likes: 34,
                views: 1234,
                status: 'active',
                statusText: '进行中',
                previewImages: [
                    '/static/images/work11.jpg',
                    '/static/images/work12.jpg'
                ],
                isLiked: true
            }
        ]);

        // 加载状态
        const loading = ref(false);
        const hasMore = ref(true);


        // ===== 计算属性 =====
        // 页面标题
        const pageTitle = computed(() => {
            if (activityId.value === 0) {
                return '历史作品排行榜';
            } else {
                return `${activityName.value}作品排行榜`;
            }
        });

        // 是否为全局排行榜
        const isGlobalRank = computed(() => {
            return activityId.value === 0;
        });

        // 过滤后的排行榜数据
        const filteredRankList = computed(() => {
            let result = [...rankList.value];

            // 搜索过滤（仅在全局排行榜时生效）
            if (isGlobalRank.value && searchKeyword.value) {
                result = result.filter(item =>
                    item.title.includes(searchKeyword.value) ||
                    item.authorName.includes(searchKeyword.value) ||
                    item.description.includes(searchKeyword.value)
                );
            }

            // 排序
            result.sort((a, b) => {
                let aValue, bValue;

                switch (sortConfig.value.field) {
                    case 'votes':
                        aValue = a.votes;
                        bValue = b.votes;
                        break;
                    case 'hot':
                        aValue = a.hotScore;
                        bValue = b.hotScore;
                        break;
                    case 'likes':
                        aValue = a.likes;
                        bValue = b.likes;
                        break;
                    case 'time':
                        aValue = new Date(a.publishTime).getTime();
                        bValue = new Date(b.publishTime).getTime();
                        break;
                    default:
                        return 0;
                }

                if (sortConfig.value.order === 'desc') {
                    return bValue - aValue;
                } else {
                    return aValue - bValue;
                }
            });

            return result;
        });

        // ===== 方法函数 =====
        // 处理左侧按钮点击
        const handleLeftClick = () => {
            console.log('handleLeftClick... 父类处理事件点击事件');
            uni.reLaunch({
                url: '/pages/Index',
                fail: () => {
                    console.log('跳转失败');
                }
            });
        };

        // 处理搜索输入
        const handleSearchInput = () => {
            // 实时搜索，可以添加防抖
        };

        // 处理搜索点击
        const handleSearchClick = () => {
            // 执行搜索
            console.log('搜索关键词:', searchKeyword.value);
        };

        // 处理排序点击
        const handleSortClick = (field) => {
            if (sortConfig.value.field === field) {
                // 切换排序方向
                sortConfig.value.order = sortConfig.value.order === 'desc' ? 'asc' : 'desc';
            } else {
                // 切换排序字段
                sortConfig.value.field = field;
                sortConfig.value.order = 'desc';
            }
        };

        // 获取排序图标
        const getSortIcon = (field) => {
            if (sortConfig.value.field !== field) {
                return 'arrow-down';
            }
            return sortConfig.value.order === 'desc' ? 'arrow-down' : 'arrow-up';
        };

        // 获取排序颜色
        const getSortColor = (field) => {
            return sortConfig.value.field === field ? '#007AFF' : '#999';
        };

        // 获取排名样式类
        const getRankClass = (rank) => {
            if (rank === 1) return 'rank-first';
            if (rank === 2) return 'rank-second';
            if (rank === 3) return 'rank-third';
            return 'rank-normal';
        };

        // 计算票数差距
        const getVoteGap = (currentItem, previousItem) => {
            if (!previousItem) return 0;
            return previousItem.votes - currentItem.votes;
        };

        // 处理排行榜项点击
        const handleRankItemClick = (item) => {
            uni.navigateTo({
                url: `/pages-vote/entry/EntryDetail?id=${item.id}`
            });
        };

        // 处理投票点击
        const handleVoteClick = (item) => {
            uni.navigateTo({
                url: `/pages-vote/entry/EntryDetail?id=${item.id}&tab=vote`
            });
        };

        // 处理点赞点击
        const handleLikeClick = (item) => {
            item.isLiked = !item.isLiked;
            if (item.isLiked) {
                item.likes++;
            } else {
                item.likes--;
            }
            // TODO: 调用接口更新点赞状态
        };

        // 处理详情点击
        const handleDetailClick = (item) => {
            uni.navigateTo({
                url: `/pages-vote/entry/EntryDetail?id=${item.id}`
            });
        };

        // 处理加载更多
        const handleLoadMore = async () => {
            if (loading.value) return;

            loading.value = true;
            try {
                // TODO: 调用接口加载更多数据
                await new Promise(resolve => setTimeout(resolve, 1000));

                // 模拟加载更多数据
                const moreData = [
                    {
                        id: 6,
                        title: '抽象表现主义作品',
                        description: '抽象表现主义风格的艺术作品',
                        authorName: '孙八',
                        authorAvatar: '/static/images/avatar6.jpg',
                        publishTime: '2024-03-10',
                        activityName: '2024年度设计大赛',
                        votes: 334,
                        hotScore: 62,
                        likes: 28,
                        views: 890,
                        status: 'active',
                        statusText: '进行中',
                        previewImages: [
                            '/static/images/work13.jpg'
                        ],
                        isLiked: false
                    }
                ];

                rankList.value.push(...moreData);
                hasMore.value = false; // 模拟没有更多数据
            } catch (error) {
                console.error('加载更多失败:', error);
                uni.showToast({
                    title: '加载失败',
                    icon: 'none'
                });
            } finally {
                loading.value = false;
            }
        };

        // 处理头部高度变化
        const handleHeaderHeightChange = (heightInfo) => {
            console.log("handleHeaderHeightChange...", heightInfo);
            headerHeight.value = heightInfo?.totalHeaderHeight || 64;
        };

        // 处理底部高度变化
        const handleBottomHeightChange = (heightInfo) => {
            console.log("handleBottomHeightChange...", heightInfo);
            bottomHeight.value = heightInfo?.totalBottomHeight || 100;
        };

        // 处理底部导航点击
        const handleTabClick = (item) => {
            console.log('切换到:', item.path);
        };

        // ===== 生命周期钩子 =====
        onLoad((options) => {
            // 获取页面参数
            if (options.activityId) {
                activityId.value = parseInt(options.activityId);
            }
            if (options.activityName) {
                activityName.value = decodeURIComponent(options.activityName);
            }

            // 加载数据
            loadRankData();
        });

        onMounted(() => {
            // 可以在这里加载实际数据
        });

        // 加载排行榜数据
        const loadRankData = async () => {
            try {
                // TODO: 调用实际接口获取数据
                // const res = await getEntryRankData(activityId.value);
                // rankList.value = res.data;
            } catch (error) {
                console.error('加载排行榜数据失败:', error);
                uni.showToast({
                    title: '加载数据失败',
                    icon: 'none'
                });
            }
        };

        // ===== 返回数据和方法 =====
        return {
            // 响应式对象
            headerHeight,
            bottomHeight,
            activityId,
            activityName,
            searchKeyword,
            sortConfig,
            rankList,
            loading,
            hasMore,
            pageTitle,
            isGlobalRank,
            filteredRankList,

            // 方法函数
            handleHeaderHeightChange,
            handleBottomHeightChange,
            handleSearchInput,
            handleSearchClick,
            handleSortClick,
            getSortIcon,
            getSortColor,
            getRankClass,
            handleRankItemClick,
            handleVoteClick,
            handleLikeClick,
            handleDetailClick,
            handleLoadMore,
            handleTabClick,
            loadRankData,
            handleLeftClick,
            getVoteGap
        };
    },
    // 组件之间交互事件
    methods: {

    },
    // 生命周期 - 创建完成（访问DOM元素）
    beforeCreate() {

    },
    // 生命周期 - 创建完成（访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（访问当前this实例）
    mounted() {

    },
    // 生命周期 - 更新之前（访问当前this实例）
    beforeUpdate() {

    },
    // 生命周期 - 更新之前（访问当前this实例）
    updated() {

    },
    // 生命周期 - 销毁之前（访问当前this实例）
    unmounted() {

    },
    // 生命周期 - 组件激活（访问当前this实例）
    activated() {

    },
    // 生命周期 - 组件停用（访问当前this实例）
    deactivated() {

    },
    // 生命周期 - 子孙组件错误时
    errorCaptured() {

    }
});
</script>
<style lang='less' scoped>
/* scoped 使用得定义的样式只在本页面内生效  */
.container {
    width: 100%;
    min-height: 100vh;
    background-color: #f5f5f5;
}

// ===== 全局排行榜样式 =====
// 搜索筛选区
.search-filter-box {
    margin: 20rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

    .search-box {
        display: flex;
        align-items: center;
        background-color: #f8f8f8;
        border-radius: 30rpx;
        padding: 20rpx 30rpx;
        margin-bottom: 30rpx;

        .search-input {
            flex: 1;
            margin-left: 20rpx;
            font-size: 28rpx;
            color: #333;
        }

        .search-btn {
            background-color: #007AFF;
            color: #ffffff;
            padding: 12rpx 30rpx;
            border-radius: 25rpx;
            margin-left: 20rpx;

            text {
                font-size: 26rpx;
            }
        }
    }

    .filter-options {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 20rpx;

        .filter-item {
            display: flex;
            align-items: center;
            background-color: #f8f8f8;
            padding: 16rpx 24rpx;
            border-radius: 25rpx;
            flex: 1;
            justify-content: center;

            text {
                font-size: 26rpx;
                color: #666;
                margin-right: 8rpx;
            }
        }
    }
}

// 全局排行榜列表
.rank-list {
    margin: 20rpx;

    .rank-item {
        display: flex;
        align-items: flex-start;
        background-color: #ffffff;
        border-radius: 16rpx;
        padding: 30rpx;
        margin-bottom: 20rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
        position: relative;

        .rank-number {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 30rpx;
            font-weight: bold;
            font-size: 32rpx;
            flex-shrink: 0;

            &.rank-first {
                background: linear-gradient(135deg, #ffd700, #ffed4e);
                color: #333;
            }

            &.rank-second {
                background: linear-gradient(135deg, #c0c0c0, #e5e5e5);
                color: #333;
            }

            &.rank-third {
                background: linear-gradient(135deg, #cd7f32, #daa520);
                color: #ffffff;
            }

            &.rank-normal {
                background-color: #f8f8f8;
                color: #666;
            }
        }

        .entry-info {
            flex: 1;
            padding-right: 120rpx;

            .entry-header {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                margin-bottom: 16rpx;

                .entry-title {
                    font-size: 32rpx;
                    font-weight: bold;
                    color: #333;
                    flex: 1;
                    margin-right: 20rpx;
                }

                .entry-status {
                    padding: 8rpx 20rpx;
                    border-radius: 20rpx;
                    font-size: 24rpx;
                    flex-shrink: 0;

                    &.active {
                        background-color: #e6f7ff;
                        color: #007AFF;
                    }

                    &.inactive {
                        background-color: #f5f5f5;
                        color: #999;
                    }
                }
            }

            .author-info {
                display: flex;
                align-items: center;
                margin-bottom: 16rpx;

                .author-avatar {
                    width: 60rpx;
                    height: 60rpx;
                    border-radius: 50%;
                    overflow: hidden;
                    margin-right: 16rpx;

                    image {
                        width: 100%;
                        height: 100%;
                    }
                }

                .author-details {
                    flex: 1;

                    .author-name {
                        font-size: 28rpx;
                        color: #333;
                        font-weight: bold;
                        display: block;
                        margin-bottom: 4rpx;
                    }

                    .publish-time {
                        font-size: 24rpx;
                        color: #999;
                    }
                }
            }

            .entry-desc {
                font-size: 26rpx;
                color: #666;
                margin-bottom: 16rpx;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                line-height: 1.5;
            }

            .activity-info {
                display: flex;
                align-items: center;
                margin-bottom: 16rpx;
                background-color: #f8f8f8;
                padding: 8rpx 16rpx;
                border-radius: 20rpx;
                width: fit-content;

                .activity-name {
                    font-size: 24rpx;
                    color: #666;
                    margin-left: 8rpx;
                }
            }

            .entry-stats {
                display: flex;
                flex-wrap: wrap;
                gap: 16rpx;
                margin-bottom: 16rpx;

                .stat-item {
                    display: flex;
                    align-items: center;

                    text {
                        font-size: 22rpx;
                        color: #666;
                        margin-left: 4rpx;
                    }
                }
            }

            .entry-preview {
                display: flex;
                gap: 6rpx;

                .preview-image {
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 8rpx;
                    background-color: #f0f0f0;
                }

                .more-images {
                    width: 100rpx;
                    height: 100rpx;
                    background-color: rgba(0, 0, 0, 0.6);
                    border-radius: 8rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    text {
                        color: #ffffff;
                        font-size: 20rpx;
                    }
                }
            }
        }

        .action-buttons {
            display: flex;
            flex-direction: column;
            gap: 12rpx;
            flex-shrink: 0;
            position: absolute;
            top: 30rpx;
            right: 30rpx;

            .vote-btn {
                display: flex;
                align-items: center;
                background-color: #f0f8ff;
                padding: 8rpx 16rpx;
                border-radius: 20rpx;
                border: 1rpx solid #007AFF;

                text {
                    font-size: 22rpx;
                    color: #007AFF;
                    margin-left: 4rpx;
                }
            }

            .like-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 50rpx;
                height: 50rpx;
                background-color: #f8f8f8;
                border-radius: 50%;
            }

            .detail-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 50rpx;
                height: 50rpx;
                background-color: #f8f8f8;
                border-radius: 50%;
            }
        }
    }
}

// ===== 活动内部排行榜样式 =====
.activity-rank-list {
    margin: 20rpx;

    .activity-rank-item {
        display: flex;
        align-items: center;
        background-color: #ffffff;
        border-radius: 16rpx;
        padding: 24rpx;
        margin-bottom: 16rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

        .rank-number {
            width: 60rpx;
            height: 60rpx;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20rpx;
            font-weight: bold;
            font-size: 28rpx;
            flex-shrink: 0;

            &.rank-first {
                background: linear-gradient(135deg, #ffd700, #ffed4e);
                color: #333;
            }

            &.rank-second {
                background: linear-gradient(135deg, #c0c0c0, #e5e5e5);
                color: #333;
            }

            &.rank-third {
                background: linear-gradient(135deg, #cd7f32, #daa520);
                color: #ffffff;
            }

            &.rank-normal {
                background-color: #f8f8f8;
                color: #666;
            }
        }

        .entry-info {
            flex: 1;
            margin-right: 20rpx;

            .entry-header {
                margin-bottom: 12rpx;

                .entry-title {
                    font-size: 30rpx;
                    font-weight: bold;
                    color: #333;
                }
            }

            .author-info {
                display: flex;
                align-items: center;
                margin-bottom: 8rpx;

                .author-avatar {
                    width: 40rpx;
                    height: 40rpx;
                    border-radius: 50%;
                    overflow: hidden;
                    margin-right: 12rpx;

                    image {
                        width: 100%;
                        height: 100%;
                    }
                }

                .author-details {
                    .author-name {
                        font-size: 24rpx;
                        color: #666;
                    }
                }
            }

            .gap-info {
                .gap-text {
                    font-size: 22rpx;
                    color: #999;
                }
            }
        }

        .action-buttons {
            display: flex;
            flex-direction: column;
            gap: 12rpx;
            flex-shrink: 0;

            .vote-btn {
                display: flex;
                align-items: center;
                background-color: #f0f8ff;
                padding: 8rpx 16rpx;
                border-radius: 20rpx;
                border: 1rpx solid #007AFF;

                text {
                    font-size: 22rpx;
                    color: #007AFF;
                    margin-left: 4rpx;
                }
            }

            .detail-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 50rpx;
                height: 50rpx;
                background-color: #f8f8f8;
                border-radius: 50%;
            }
        }
    }
}

// ===== 通用样式 =====
// 加载更多
.load-more {
    text-align: center;
    padding: 40rpx;
    color: #666;
    font-size: 28rpx;
}

// 空状态
.empty-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100rpx 40rpx;
    color: #999;
    font-size: 28rpx;

    text {
        margin-top: 20rpx;
    }
}
</style>